<template>
  <div class="gatway-box">
    <!-- 头部文字 -->
    <div class="gatwayHeader">
      <p class="text-box">
        <span>计费 / </span>
        <span class="text">充值记录</span>
        <span> - 展示当前账户的消息额度的所有充值记录。</span>
      </p>
    </div>

    <!-- 中间搜索 -->
    <div class="mt-10">
      <!-- 选择 -->
      <el-tabs
        v-model="agreementValue"
        type="card"
        class="main-tabs bg-fff mt-15"
        @tab-change="handleClick"
      >
        <!-- @tab-click="handleClick" -->
        <el-tab-pane label="所有设备" name=""></el-tab-pane>
        <el-tab-pane label="LoRaWAN" name="LoRaWAN"></el-tab-pane>
        <el-tab-pane label="LoRaPP" name="LoRaPP"></el-tab-pane>
        <!-- 绑定在线状态 -->
        <el-form :model="form" label-width="120px">
          <el-form-item label="在线状态">
            <el-select v-model="form.online" placeholder="在线">
              <el-option label="在线" value="true" />
              <el-option label="离线" value="false" />
              <el-option label="全部" value="" />
            </el-select>
          </el-form-item>
          <!-- 绑定EUI -->
          <el-form-item label="EUI" style="max-width: 350px">
            <el-input v-model="form.eui" />
          </el-form-item>
          <!-- 绑定的开始时间和结束时间 -->
          <el-form-item label="绑定时间">
            <div class="demo-date-picker">
              <div class="block">
                <el-date-picker
                  v-model="bindTime"
                  type="daterange"
                  range-separator="To"
                  start-placeholder="开始时间"
                  end-placeholder="结束时间"
                  :size="'big'"
                  @change="showTime"
                  unlink-panels
                />
              </div>
            </div>
          </el-form-item>
        </el-form>

        <!-- 按钮组 -->
        <div class="flex">
          <el-button-group class="ml-30 mb-20 mr-10">
            <el-button type="primary" :icon="Search" @click="searchGateWay()"
              >搜索</el-button
            >
            <el-button type="primary" :icon="Delete" @click="clearGateWay()"
              >清除条件</el-button
            >
            <el-button type="primary" :icon="Refresh" @click="refreshGateWay()"
              >刷新</el-button
            >
          </el-button-group>
          <span class="searchNum">搜索结果：{{serachResultNum}}</span>
        </div>
      </el-tabs>
    </div>

    <div class="mt-10">
      <el-table :data="showList" stripe class="table-box ">
        <el-table-column align="center" type="index" label="序号" width="100" />
        <el-table-column align="center" prop="eui" label="EUI" />
        <el-table-column align="center" prop="name" label="设备名称" />
        <el-table-column align="center" prop="mhz" label="频率" />
        <el-table-column align="center" prop="online" :formatter="fonline2" label="在线状态" />
        <el-table-column align="center" prop="country" label="国家" />
        <el-table-column align="center" prop="agreement" label="组网协议类型" />
        <el-table-column
          align="center"
          prop="uTime"
          :formatter="fcDate"
          label="绑定时间"
        />
      </el-table>
      <div class="pagination-box flex jc-c aic">
        <el-pagination
          class="pagination"
          background
          layout="prev, pager, next"
          :current-page="cpage"
          @current-change="cpageChange"
          :total="serachResultNum"
          :page-size="5"
        />
      </div>
    </div>
  </div>
</template>


<script setup>
import moment from 'moment';
import { ref, reactive, onMounted, inject } from "vue";
import { Search, Delete, Refresh } from "@element-plus/icons-vue";
import * as api from "@/api/index";
const { fcDate ,fonline2} = inject("utils");
const reload = inject("reload")

//网关协议
const agreementValue = ref("");

//选择网关
const handleClick = () => {
  // console.log(agreementValue.value);
  cpage.value = 1;
  getGatwayList();
};

//绑定时间
const bindTime = ref("");
//将时间绑定到form对象上
const showTime = () => {
  // let date1 = new Date(bindTime.value[0]);
  // let date2 = new Date(bindTime.value[1]);
  var date1 = moment(bindTime.value[0]).hours(23).minutes(59).seconds(59).valueOf()
  var date2 = moment(bindTime.value[1]).hours(23).minutes(59).seconds(59).valueOf()
  // let date3 = moment(date1).format();
  // console.log(date1,date2);
  form.date = date1 + "-" + date2;
  console.log(form.date);
};

//表单
const form = reactive({
  eui: "",
  online: "",
  date: "",
});

//showList展示数据
let showList = ref([]);
let cpage = ref(1);
let serachResultNum = ref(0);

//换页
 const cpageChange = (p)=>{
  cpage.value = p;
  getGatwayList();
 }

//获取数据
const getGatwayList = () => {
  let data = {
    currPage: cpage.value,
    pageSize: 5,
    agreement: agreementValue.value,
    ...form,
  };
  api.$gateWayList(data).then((res) => {
    showList.value = res.data;
    serachResultNum.value = res.total;
    console.log(res);
  });
};

//点击搜索
const searchGateWay = () => {
  cpage.value = 1;
  getGatwayList();
};

//点击清除条件
const clearGateWay = () => {
  console.log(form.date);
  form.eui='';
  bindTime.value = '';
  form.date = bindTime.value;
  form.online='';
  cpage.value = 1;
  getGatwayList();
};
//点击刷新
const refreshGateWay = () => {
  reload();
};
//挂载
onMounted(() => {
  getGatwayList();
});
</script>

<style lang="less" scoped>
.gatway-box {
  margin: 15px;
  font-size: 16px;
  position: relative;

  .gatwayHeader {
    background-color: #fff;
    padding: 15px;
    .text-box {
      .text {
        font-weight: bold;
      }
    }
  }
  .main-tabs {
    // background-color: #fff;
  }

  .searchNum {
    line-height: 30px;
    display: inline-block;
    margin-top: 5px;
    font-size: 14px;
  }

  .table-box{
    min-height: 300px;
  }
  .pagination-box{
      background-color: #fff;
      // border:1px solid red;
      height: 50px;
      // text-align: center;
      line-height: 50px;
    }
}
</style>